<template>
  <div class="app-container">
      <el-button type="primary" style="margin-bottom:1%" @click="newStaff.dialogVisible = true">录入新员工信息</el-button>
        <el-dialog
            title="录入新员工信息"
            :visible.sync="newStaff.dialogVisible"
            width="30%"
            >
            <div style="text-align:center">
                * 工号：<el-input v-model="newStaff.staffNumber" placeholder="请输入工号" maxlength="10" class="inputBox"></el-input><br>
                * 姓名：<el-input v-model="newStaff.name" placeholder="请输入姓名" maxlength="30" class="inputBox"></el-input><br>
                * 密码：<el-input v-model="newStaff.phoneNumber" placeholder="默认为电话号码" maxlength="32" class="inputBox" :disabled="true"></el-input><br>
                * 性别：<el-radio v-model="newStaff.sex" label="男" style="margin-left:5%;margin-bottom:2%">男</el-radio>
                     <el-radio v-model="newStaff.sex" label="女" >女</el-radio><br>
                * 部门：<el-input v-model="newStaff.department" placeholder="请输入部门" maxlength="30" class="inputBox"></el-input><br>
                * 电话：<el-input v-model="newStaff.phoneNumber" placeholder="请输入11位电话号码" maxlength="11" class="inputBox" oninput="value=value.replace(/[^\d]/g,'')" ></el-input><br>
                邮箱：<el-input v-model="newStaff.email" placeholder="请输入邮箱" maxlength="50" class="inputBox" ></el-input><br>
                * 薪资：<el-input v-model="newStaff.salary" placeholder="请输入薪资" oninput="value=value.replace(/[^\d]/g,'')" maxLength='11' class="inputBox"></el-input><br>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="newStaff.dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="newStaff.dialogVisible = false;
                addStaff()">确 定</el-button>
            </span>
        </el-dialog>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="工号" width="150">
        <template slot-scope="scope">
          {{ scope.row.staffNumber }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="性别" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sex }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属部门" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.department }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="500">
        <template slot-scope="scope">
            <el-button type="primary" style="margin-right:2%" icon="el-icon-edit" size="small" @click="scope.row.dialogVisible = true">修改员工信息</el-button>

            <el-dialog
                title="修改员工信息"
                :visible.sync="scope.row.dialogVisible"
                width="30%"
                >
                <div>
                    * 工号：<el-input v-model="scope.row.staffNumber" placeholder="请输入工号" class="inputBox" maxlength="10"></el-input><br>
                    * 姓名：<el-input v-model="scope.row.name" placeholder="请输入姓名" class="inputBox" maxlength="50"></el-input><br>
                    密码：
                    <el-popover placement="bottom" width="230" style="margin-right:5px" v-model="scope.row.pasVisible">
                        <p>确定要重置密码吗？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" @click="scope.row.pasVisible = false">取消</el-button>
                            <el-button type="danger" size="mini" @click="scope.row.pasVisible = false;resetPassword(scope.row);">确定</el-button>
                        </div>
                        <el-button type="primary" style="margin-bottom:2%;width:35%"  slot="reference">重置密码</el-button>
                    </el-popover>
                    <br>
                    <el-dialog
                        width="20%"
                        title="新的密码"
                        :visible.sync="scope.row.innerVisible"
                        append-to-body>
                        <span class="pas">{{ scope.row.newPas }}</span>
                    </el-dialog>
                    * 性别：<el-input v-model="scope.row.sex" placeholder="请输入性别" class="inputBox" maxlength="1"></el-input><br>
                    * 部门：<el-input v-model="scope.row.department" placeholder="请输入部门" class="inputBox" maxlength="30"></el-input><br>
                    * 电话：<el-input v-model="scope.row.phoneNumber" placeholder="请输入11位电话号码" class="inputBox" :disabled="true" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')"></el-input><br>
                    邮箱：<el-input v-model="scope.row.email" placeholder="请输入邮箱" class="inputBox" maxlength="50" :disabled="true"></el-input><br>
                    * 薪资：<el-input v-model="scope.row.salary" placeholder="请输入薪资" class="inputBox" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')" maxLength='11'></el-input><br>

                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="scope.row.dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="scope.row.dialogVisible = false;
                    updateStaff(scope.row.staffNumber,scope.row.name,scope.row.sex,scope.row.department,scope.row.phoneNumber,scope.row.email,scope.row.salary,scope.row.id)">修 改</el-button>
                </span>
            </el-dialog>
            
            <el-popover placement="bottom" width="230" style="margin-right:5px" v-model="scope.row.delVisible">
                <p>确定删除该员工吗？</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="scope.row.delVisible = false">取消</el-button>
                    <el-button type="danger" size="mini" @click="scope.row.delVisible = false;delStaff(scope.row.staffNumber)">确定</el-button>
                </div>
                <el-button type="danger" icon="el-icon-delete" size="small" slot="reference">删除员工</el-button>
             </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        align="center"
        :page-size="5"
        @current-change="fetchData()"
        :current-page.sync="currentPage"
        layout="prev, pager, next"
        :total="total">
        </el-pagination>
  </div>
</template>

<script>
import { getPageList } from '@/api/table'
import { deleteStaff } from '@/api/table' 
import { changeStaff } from '@/api/table' 
import { resetPas } from '@/api/table' 
import { addSta } from '@/api/table' 

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      newStaff:{
          staffNumber:'',
          name:'',
          password:'',
          sex:'男',
          department:'',
          phoneNumber:'',
          email:'',
          salary:'',

          // 用于显示弹出框
          dialogVisible:false,
      },
      listLoading: true,
      currentPage:1,
      total:1,
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
      addStaff(){
          this.newStaff.password=this.newStaff.phoneNumber
          if(this.newStaff.staffNumber==null || this.newStaff.staffNumber==''){
              this.$message.error("录入失败，工号不能为空！")
              return 
          }
          if(this.newStaff.name==null || this.newStaff.name==''){
              this.$message.error("录入失败，姓名不能为空！")
              return 
          }
          if(this.newStaff.sex==null || this.newStaff.sex==''){
              this.$message.error("录入失败，性别不能为空！")
              return 
          }
          if(this.newStaff.department==null || this.newStaff.department==''){
              this.$message.error("录入失败，部门不能为空！")
              return 
          }
          if(this.newStaff.phoneNumber==null || this.newStaff.phoneNumber==''){
              this.$message.error("录入失败，电话号码不能为空！")
              return 
          }
          if(this.newStaff.salary==null || this.newStaff.salary==''){
              this.$message.error("录入失败，薪资不能为空！")
              return 
          }
          addSta(this.newStaff)
          .then(res=>{
              this.$message.success(res.data.data)
            this.fetchData()

          })
          .catch(err=>{
            this.$message.error("抱歉，服务器宕机了...")
          })

          // 完成后要置空
          this.newStaff={
            staffNumber:'',
            name:'',
            password:'',
            sex:'',
            department:'',
            phoneNumber:'',
            email:'',
            salary:'',

            // 用于显示弹出框
            dialogVisible:false,
         }
      },
      delStaff(staffNumber){
          deleteStaff({staffNumber:staffNumber})
          .then(res=>{
              this.$message.success(res.data.data)
              this.fetchData()
          })
          .catch(err=>{
                this.$message.error("抱歉，服务器宕机了...")
          })
      },
      updateStaff(staffNumber,name,sex,department,phoneNumber,email,salary,id){
          if(staffNumber==null || staffNumber==''){
              this.$message.error("修改失败，工号不能为空！")
              return 
          }
          if(name==null || name==''){
              this.$message.error("修改失败，姓名不能为空！")
              return 
          }
          if(sex==null || sex==''){
              this.$message.error("修改失败，性别不能为空！")
              return 
          }
          if(department==null || department==''){
              this.$message.error("修改失败，部门不能为空！")
              return 
          }
          if(phoneNumber==null || phoneNumber==''){
              this.$message.error("修改失败，电话号码不能为空！")
              return 
          }
          if(salary==null || salary==''){
              this.$message.error("修改失败，薪资不能为空！")
              return 
          }
          changeStaff({staffNumber:staffNumber,name:name,sex:sex,department:department,phoneNumber:phoneNumber,email:email,salary:salary,id:id})
          .then(res=>{
              this.$message.success(res.data.data)
              this.fetchData()
          })
          .catch(err=>{
                this.$message.error("抱歉，服务器宕机了...")
          })
      },
      resetPassword(params){
          resetPas({staffNumber:params.staffNumber})
          .then(res=>{
              params.newPas=res.data.data
          })
          .then(()=>{
              params.innerVisible=true
              this.$message.success('重置该员工密码成功！')
          })
          .catch(err=>{
            this.$message.error("抱歉，服务器宕机了...")
          }) 
          
      },
    fetchData() {
        this.list=[]
      this.listLoading = true
      getPageList({currentPage:this.currentPage}).then(res => {
          var data=res.data.data.data
          this.total=res.data.data.total
          for(let i=0;i<data.length;i++){
              var l={
              staffNumber:data[i].staffNumber,
              name:data[i].name,
              password:'',
              sex:data[i].sex,
              department:data[i].department,
              phoneNumber:data[i].phoneNumber,
              email:data[i].email,
              salary:data[i].salary,
              id:data[i].id,

              // 这里增加一个重置后的密码变量
              newPas:'',

              // 这里增加了两个可控制的动态属性
              dialogVisible:false,
              innerVisible:false,
              pasVisible:false,
              delVisible:false,
              input:'',
                }
              this.list.push(l);
          }
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>
.inputBox{
    width:70%;
    margin-bottom: 2%;
}
.pas{
    align-content: center;
}
</style>